<script lang="ts" setup>
	import { getExpertList, onlieList, onlieAdd, onlieSelect } from '~/api/home'
	import { decode, encode } from '~/utils/base/dataEncry'
	import { Star, Share, ChatLineRound } from '@element-plus/icons-vue'
	import { getFileUrl } from '~/api/file'
	const dayjs = useDayjs()
	const router = useRouter()
	const TJlist = ref<any[]>([])
	const list = ref<any[]>([])
	const fileData = ref()
	const activeName = ref('first')
	const nowImg = ref()
	const textarea = ref()
	const textzdhf = ref()
	const nowContents = ref()
	const divs = ref()
	const nowName = ref()
	const store = useUserStore()
	const userInfo = computed(() => store.userInfo)
	const itemsList = reactive([])
	const title = ref('专家库')
	const routePath = [{ name: '首页', path: '/' }, { name: title, path: '/peopleHealth/ExpertList' }, { name: '专家详情', type:'back' }, { name: '健康咨询', path: '' }]
	const route = useRoute()
	fileData.value = decode(route.query.data)
	const queryParams = reactive(
		{
			page: {
				pageNo: 1,
				rownumber: 3000
			},
			order: [{
				colName: 'modify_time',
				orderType: 'asc', // asc升序 desc降序
			}],
			condition: [{ colName: 'create_user', ruleType: 'eq', value: userInfo.value.user_no }, { colName: 'expert_id', ruleType: 'eq', value: fileData.value.uid }],
		}
	)
	function getData() {
		getExpertList().then((res) => {
			TJlist.value = res.data.slice(0, 3)
			divs.value = document.getElementById('textContent')
			divs.value.scrollTop = divs.value.scrollHeight
		}).catch(() => {
		})
	}
	onMounted(() => {
		getData()
		getOnlineList()
	})
	function clickItem(item : any) {
		// navigateTo({
		//     path: `/peopleHealth/ExpertListDetail`,
		//     query: {
		//         data: encode(item),
		//     },
		// })
    navigateTo({
				path: `/peopleHealth/ExpertListDetail`,
        query: {
				id:item.id,
			}})
		// getExpertList({
		// 	condition: [{ colName: 'uid', ruleType: 'eq', value: item.uid }],
		// },).then(res => {
		// 	fileData.value = res.data[0]
		// })
	}
	function sendMessage() {
		const params = {
			member_id: userInfo.value.user_no,
			author: userInfo.value.real_name,
			expert_id: fileData.value.uid,
			expert_name: fileData.value.name,
			problem_details: textarea.value,
		}
		onlieAdd(params).then(res => {
			getOnlineList()
			// zdhf()
		})
		setTimeout(() => {
			divs.value = document.getElementById('textContent')
			divs.value.scrollTop = divs.value.scrollHeight
		}, 200);
		textarea.value = ''
	}
	function zdhf() {
		onlieSelect().then(res => {
			itemsList.push([{
				type: 2,
				url: fileData.value.personal_img,
				name: fileData.value.name,
				time: dayjs().format('YYYY-MM-DD hh:mm:ss'),
				content: res.data[1].mode_note
			}])
			// console.log(itemsList)
			setTimeout(() => {
				divs.value = document.getElementById('textContent')
				divs.value.scrollTop = divs.value.scrollHeight
			}, 200);
		})

	}
	function getOnlineList() {
		// itemsList.value = []
		itemsList.length = 0;
		onlieList(queryParams).then(res => {
			// fileData.value = res.data[0]
			res.data.forEach(item => {
				itemsList.push([{
					type: 1,
					url: '/img/person.png',
					name: item.author,
					time: item.create_time,
					content: item.problem_details
				}, {
					type: 2,
					url: fileData.value.personal_img,
					name: fileData.value.name,
					time: item.modify_time,
					content: item.problem_overview
				}])
			})
			if (res.data.length == 1) {
				zdhf()
			}
		})
		setTimeout(() => {
			divs.value = document.getElementById('textContent')
			divs.value.scrollTop = divs.value.scrollHeight
		}, 200);
		// console.log(itemsList)
	}
</script>

<template>
	<div class="bg-#F7F9FD bg-[url('/img/index.png')] bg-no-repeat ">
		<ClientOnly>
			<PublicSearch type="全部" />
			<PublicSearchDialog type="全部" />
			<div class=" px-80">
				<div class=" bg-#fff">
					<CommonPageContainer :title="title" :path="routePath">
						<div class="flex flex-col justify-between mt-20px 2xl:flex-row">
							<div class="flex-1 bg-#F7F9FD ">
								<div class="w-40% flex items-center p-5 text-size-18px">
									<div class="w-40px h-40px flex items-center justify-center ml-[-50px] cursor-pointer rounded-md"
										style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
										@click="router.back()">
										<div class="w-18px h-18px flex items-center justify-center rounded-50% bg-#fff">
											<span class="-ml-2px flex items-center" text="#0E9472">&lt;</span>
										</div>
									</div>
									<div class="text-#0E9472 font-700 pl-5">健康咨询</div>
								</div>
								<div class="bg-#FFF m-5 p-5 flex">
									<div class="w-15% flex justify-center">
										<!--  <img class="w-88px h-88px" style="border-radius: 44px;" :src="fileData.personal_img"
                                            alt=""> -->
										<img class="w-88px h-88px" style="border-radius: 44px;"
											:src="getImgUrl(fileData.personal_img)" alt="">
									</div>
									<div class="p-5 w-75%">
										<div class="flex items-center">
											<div class="font-bold" text="#28A182 20px">{{ fileData.name }}</div>
											<el-divider direction="vertical" />
											<div class="font-bold" text="#28A182 20px">{{ fileData.position }}</div>
										</div>
										<div class="py-2 text-18px font-semibold">
											<span>所属医院：</span><span>{{ fileData.organ_name }}</span>
										</div>
										<div class="py-2 text-18px font-semibold">
											<span>所在科室：</span><span>{{ fileData.department_name }}</span>
										</div>
										<div class="py-2 text-18px font-semibold">
											<span>就诊时间：</span><span></span>
										</div>
									</div>
								</div>
								<div class="flex items-center m-5 px-3 py-1 bg-#FFE7BA rounded-lg">
									<i class="i-ri:shield-check-fill cursor-pointer text-#34C758" />
									<div class="pl-3">
										医生的回答只作为健康咨询类建议，不作为诊断和治疗依据，咨询建议不能替代医生面诊、不得开处方
									</div>
								</div>
								<div class="h-500px px-5 overflow-y-scroll" id="textContent">
									<div v-for="items in itemsList">
										<div v-for="item in items">
											<div class="chat-item chat-item-right" style="margin-top: 20px;"
												v-if="item.type == 1">
												<div class="chat-content">
													<div class="flex justify-end items-center">
														<span
															style="color: #999;font-size: 12px;">{{ item.time }}</span>
														<div class="pl-2">{{ item.name }}</div>
													</div>

													<div class="p-5 rounded-2xl bg-#53BE8D text-#fff text-14px">
														{{ item.content }}
													</div>

												</div>
												<img style="width: 44px;height: 44px;border-radius: 22px;"
													:src="item.url" />
											</div>
											<div class="chat-item" v-if="item.type == 2 && item.content">
												<!-- <img style="width: 44px;height: 44px;border-radius: 22px;"
                                                    :src="item.url" /> -->
												<img style="width: 44px;height: 44px;border-radius: 22px;"
													:src="getImgUrl(fileData.personal_img)" alt="">
												<div class="chat-content">
													<div class="flex justify-start items-center">
														<div class="pr-2">{{ item.name }}</div>
														<span
															style="color: #999;font-size: 12px;">{{ item.time }}</span>
													</div>
													<div class="chat-content-view right-chat-content">
														{{ item.content }}
													</div>
												</div>
											</div>
										</div>

									</div>
								</div>
								<!-- 输入框 -->

								<div class="p-5">
									<el-input type="textarea" :rows="5" style="width: 93%;" placeholder="请输入内容"
										v-model="textarea">
									</el-input>
									<el-button color="#52B49A" class="" style="color:#FFF;"
										@click="sendMessage()">发送</el-button>
								</div>
								<!-- <div class="bg-#FFF m-5 p-5">
                                    <div class="flex items-center">
                                        <span class="w-8px h-8px bg-#0E9472 inline-block ml-10px "></span>
                                        <span class="pl-4 font-extrabold" text="#28A182 20px">简介</span>
                                    </div>
                                    <div class="py-5">
                                        {{ fileData.brief_introduction }}
                                    </div>
                                    <div class="flex items-center">
                                        <span class="w-8px h-8px bg-#0E9472 inline-block ml-10px "></span>
                                        <span class="pl-4 font-extrabold" text="#28A182 20px">擅长</span>
                                    </div>
                                    <div class="py-5">
                                        {{ fileData.be_good_at }}
                                    </div>
                                </div>
                                <div class="bg-#FFF m-5 p-5">
                                    <div class="flex items-center">
                                        <span class="w-8px h-8px bg-#0E9472 inline-block ml-10px "></span>
                                        <span class="pl-4 font-extrabold" text="#28A182 20px">专家作品</span>
                                    </div>
                                    <div class="p-5">
                                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                                            <el-tab-pane label="全部" name="first">全部</el-tab-pane>
                                            <el-tab-pane label="文章" name="second">文章</el-tab-pane>
                                            <el-tab-pane label="视频" name="third">视频</el-tab-pane>
                                            <el-tab-pane label="音频" name="fourth">音频</el-tab-pane>
                                            <el-tab-pane label="问答" name="five">问答</el-tab-pane>
                                        </el-tabs>
                                    </div>
                                </div> -->
							</div>
							<div class="w-full min-w-200px mt-20px 2xl:w-15% 2xl:mt-0">
								<div>
									<div class=" flex items-center py-5px px-10px rounded-tr rounded-tl h-40px"
										style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);">
										<img src="/img/tj.png" alt="">
										<div class="pl-15px " text="#fff 16px">推荐</div>
									</div>
									<div class="  rounded-br rounded-bl flex 2xl:flex-col flex-gap-10px"
										border="2px solid #50bc8d">
										<div v-for="item in TJlist"
											class="cursor-pointer flex p-2 justify-between flex-1 "
											@click="clickItem(item)" hover="text-#0E9472">
											<img class="w-40%  inline-block" :src="item.personal_img" alt="">
											<div class="w-58%">
												<div class="flex justify-between">
													<div class="" text="12px">{{ item.name }}</div>
													<!-- <div class="p-1px"
														style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);border-radius: 3px;"
														text="#fff 12px">咨询</div> -->
												</div>
												<div text="12px" class="py-2"> {{ item.organ_name }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</CommonPageContainer>
				</div>
			</div>
		</ClientOnly>
	</div>
</template>

<style scoped>
	:deep() .el-tabs__item.is-active {
		color: #28A182;
	}

	:deep() .el-tabs__item {
		font-size: 18px;
		font-weight: 600;
	}

	/* :deep() .el-tabs__nav-wrap::after{
        background-color: #28A182;
    } */
	:deep() .el-tabs__item:hover {
		color: #28A182;
	}

	/* 下划线颜色 */
	:deep() .el-tabs__active-bar {
		background-color: #28A182;
	}

	.chat-item {
		width: 100%;
		display: flex;
		gap: 20px;

		.el-image {
			width: 88px;
			height: 88px;
			border-radius: 50%;
		}

		.chat-content {
			display: flex;
			flex-direction: column;

			.name-view {
				display: flex;
				font-size: 16px;
				color: #666666;
				margin-top: 5px;
			}

			.chat-content-view {
				background: #F7F7F7;
				padding: 20px;
				font-size: 14px;
				color: #999999;
				box-sizing: border-box;
				max-width: 650px;
				line-height: 25px;
			}
		}
	}

	.chat-item-right {
		justify-content: end;
	}

	.name-view-right {
		justify-content: end;
	}


	.right-chat-content {
		border-radius: 16px 0px 16px 16px;
	}
</style>